<template>
  <c-row :col="6" class="c-pagination">
    <c-col class="c-pagination-info">
      <!-- 已选中 -->
      {{ multLang('com_develop_a') }}
      <span>{{ seled }}</span>
      <!-- 条, 共 -->
      {{ multLang('com_strip_a') }},
      {{ multLang('com_total_a') }}
      <span>{{ total }}</span>
      <!-- 条, 共 -->
      {{ multLang('com_strip_a') }},
      {{ multLang('com_total_a') }}
      <span>{{ pages }}</span>
      <!-- 页 -->
      {{ multLang('com_pages_a') }}
    </c-col>
    <c-col class="c-pagination-body">
      <el-pagination
        background
        layout="prev, pager, next, slot"
        :total="total"
        :page-size="size"
        :current-page="page"
        @update:currentPage="$emit('update:page', $event)"
        @current-change="change"
      >
        <c-select
          size="mini"
          :options="sizes"
          :append-label="
            ` ${multLang('com_strip_a')}/${multLang('com_pages_a')}`
          "
          :value="size"
          @input="$emit('update:size', $event)"
          @change="change"
        >
        </c-select>
      </el-pagination>
    </c-col>
  </c-row>
</template>
<script>
export default {
  name: 'CPagination',
  components: {},
  props: {
    seled: { type: Number, default: 0 },
    total: { type: Number, default: 0 },
    page: { type: Number, default: 0 },
    size: { type: Number, default: 20 }
  },
  data() {
    return {
      // sizes: []
    }
  },
  computed: {
    pages() {
      const { total, size } = this
      return Math.ceil(total / size)
    },
    sizes() {
      return this.optionList('pageSizeList').map(item => {
        const { label, value } = item || {}
        return {
          label,
          value: parseInt(value)
        }
      })
    }
  },
  watch: {},
  beforeCreate() {},
  created() {
    // this.change()
    this.setOption({ key: 'pageSizeList' })
  },
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  activated() {},
  deactivated() {},
  beforeDestroy() {},
  destroyed() {},
  methods: {
    change() {
      this.$emit('change')
    }
  }
}
</script>
<style lang="scss">
.c-pagination {
  box-sizing: border-box;
  width: 100%;
  padding: 0 20px;
  height: 60px;
  line-height: 60px;
  &-info {
    font-size: 13px;
    color: #666;
    span {
      color: #3a8ee6;
    }
  }
  &-body {
    .el-pagination {
      display: inline-block;
      width: 100%;
      height: 28px;
      line-height: 28px;
      vertical-align: middle;
      padding: 0;
      text-align: right;
      .el-select {
        text-align: left;
      }
    }
  }
  .el-select {
    width: 100px;
    .el-input {
      margin: 0;
    }
  }
}
</style>
